<template>
  <!-- 删除Dialog -->
  <vc-dialog ref="deleteDialogRef" v-model="show" width="333px" height="222px" :header-img="WarningImg" show-cancel-button show-confirm-button confirm-button-txt="删除" @confirm="$emit('delete')">
    <template v-if="type === DELETE_TYPE.GROUP">
      <div class="title">确定要删除组合吗？</div>
      <div class="desc">您正在删除 {{ groupName }} ，删除后您可能无法及时收到该组合内企业的推送哦！</div>
    </template>
    <template v-if="type === DELETE_TYPE.MEMBER">
      <div class="title">确定要删除成员吗？</div>
      <div class="desc">
        您正在删除
        <span style="color: #ff5959">{{ checkedList.length }}</span>
        个组合成员，删除后您可能无法及时收到该企业的推送哦！
      </div>
    </template>
  </vc-dialog>
</template>

<script setup lang="ts">
import WarningImg from '@/assets/warning.png';
import { DELETE_TYPE } from '../apis';

interface Props {
  modelValue: boolean;
  type: DELETE_TYPE;
  groupName?: string;
  checkedList?: any[];
}
const { modelValue, type, groupName = '', checkedList = [] } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void;
  (e: 'delete'): void;
}>();

/** 自定义v-model */
const show = computed({
  get() {
    return modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const deleteDialogRef = ref();
const close = () => {
  try {
    deleteDialogRef.value?.closeFn();
  } catch {}
};

defineExpose({ close });
</script>

<style lang="scss" scoped>
.vc-dialog {
  .title {
    margin-top: 50px;
    font-size: 14px;
    font-weight: 500px;
    color: #333;
    line-height: 20px;
    text-align: center;
  }
  .desc {
    margin-top: 20px;
    padding: 0 50px;
    font-size: 12px;
    color: #666;
    line-height: 17px;
    text-align: center;
  }
}
</style>
